<!--  -->
<template>
    <div class="leftCenterModule">
      <header class="head">
          <titleModule :title="state.titleName"></titleModule>
      </header>
      <section class="main" id="rightCenterMain"></section>
    </div>
  </template>
  
  <script setup>
  import { onMounted, reactive } from 'vue'
  import titleModule from '../../components/title/index.vue'
  import { Pie } from '@antv/g2plot';
  const state = reactive({
      titleName:'各区GDP'
  })
  //创建折线图
  const createPie = () =>{
      //1.创建数据源
      const data = [
        {
            type: '分类一',
            value: 27,
        },
        {
            type: '分类二',
            value: 25,
        },
        {
            type: '分类三',
            value: 18,
        },
        {
            type: '分类四',
            value: 15,
        },
        {
            type: '分类五',
            value: 10,
        },
        {
            type: '其它',
            value: 5,
        },
      ]
      //2.创建pie对象
      const piePlot = new Pie('rightTopMain',{
          forceFit:true,
          radius:0.8,
          data,
          angleField:'value',
          colorField:'type',
          label:{
            visible:true,
            type:'inner'
          }
      })
      //3.渲染
      piePlot.render();
  }
  
  onMounted(()=>{
    createPie()
  })
  </script>
  <style  scoped>
  .leftCenterModule{
      width: 100%;
      height: 100%;
  }
  .head{
      width: 100%;
      height: 15%;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .main{
      width: 100%;
      height: 85%;
      
  }
  </style>